<template>
    <div class="m-login-wrap">
        <div class="header-login-wrapper">
            <a href="/" class="site-logo"></a>
        </div> 
        <div class="login-wrapper">
            <el-row>
                <el-col :span="16">
                    <div class="login-banner">
                        <img src="//s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg" width="480" height="370" alt="美团网">
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="login-form">
                        <ul>
                            <li :style="{'visibility':status?'initial':'hidden'}">
                                <div class="tip-status">
                                    <i class="tip-icon tip-status--opinfo"></i>
                                    {{error}}
                                </div>
                            </li>
                            <li>
                                <div class="cation">账号登录</div>
                            </li>
                            <li>
                                <el-input prefix-icon="profile" v-model="rule.username" placeholder="请输入用户名"></el-input>
                            </li>
                            <li>
                                <el-input prefix-icon="password" type="password" v-model="rule.password" placeholder="请输入密码"></el-input>    
                            </li>
                            <li>
                                <div class="forget">忘记密码？</div>
                            </li>
                            <li>
                                <el-button class="btn-login" :class="{'enter':logs,'inital':!logs}" type="success" size="mini" @click="login">{{desc}}</el-button>
                            </li>
                            <li>
                                <span class="no-count">还没有账号？</span>
                                <a href="/register" class="free">免费注册</a>
                            </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>   
        </div>  
    </div>
</template>

<script>
import cryptoJs from 'crypto-js'

export default{
    layout: 'logout',
    data(){
        return{
            status: false,
            logs: false,
            desc: '登 录',
            error: '',
            rule:{
                username: '',
                password: ''
            }    
        }
    },
    methods:{
        login(){
            this.$axios.post('http://127.0.0.1:8082/user/login' , {
                username: this.rule.username,
                password: cryptoJs.MD5(this.rule.password).toString()
            }).then((res) => {
                if(res.status === 200 && res.data.code === 0){
                    this.logs = true;
                    this.desc = '登录中...';
                    this.status = false;
                    setTimeout(() => {
                        window.location.href = '/';
                    },1000)
                }else{
                    this.error = res.data.msg;
                    this.status = true;
                }
            })    
        }
    }
}
</script>

<style lang="less">
    @import '../assets/less/login/login.less';
</style>